<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>amCharts examples</title> 
        <link rel="stylesheet" href="style.css" type="text/css">
        <script src="../../amcharts/javascript/amcharts.js" type="text/javascript"></script>
        <script src="../../amcharts/javascript/raphael.js" type="text/javascript"></script>        
	    
         <script type="text/javascript">

        var chart;
		var legend;

        var chartData = [{country:"Czech Republic",litres:156.90},
				{country:"Ireland",litres:131.10},
				{country:"Germany",litres:115.80},
				{country:"Australia",litres:109.90},
				{country:"Austria",litres:108.30},
				{country:"UK",litres:99.00},
				{country:"Belgium",litres:93.00}];

         window.onload = function() {
            chart = new AmCharts.AmPieChart();
            chart.dataProvider = chartData;
            chart.titleField = "country";
			chart.valueField = "litres";

			legend = new AmCharts.AmLegend();
			legend.align = "center";
			legend.markerType = "circle";
			chart.addLegend(legend);

			chart.write("chartdiv");
		}


		function setLabelPosition(){

			if(document.getElementById("rb1").checked){
				chart.labelRadius = 30;
				chart.labelText = "[[title]]: [[value]]";
			}
			else{
				chart.labelRadius = -30;
				chart.labelText = "[[percents]]%";
			}
			chart.validateNow();
		}


		function set3D(){

			if(document.getElementById("rb3").checked){
				chart.depth3D = 10;
				chart.angle = 10;
			}
			else{
				chart.depth3D = 0;
				chart.angle = 0;
			}
			chart.validateNow();
		}

		function setSwitch(){

			if(document.getElementById("rb5").checked){
				legend.switchType = "x";
			}
			else{
				legend.switchType = "v";
			}
			legend.validateNow();
		}

	    </script>

    </head>

	<body>
		<div id="chartdiv" style="width: 100%; height: 400px;"></div>
  			<table align="center" cellspacing="20">
  			    <tr>
  			        <td>
						<input type="radio" checked="true" name="group" id="rb1" onclick="setLabelPosition()"> labels outside
						<input type="radio" name="group" id="rb2" onclick="setLabelPosition()"> labels inside
					</td>
		        	<td>
						<input type="radio" name="group2" id="rb3" onclick="set3D()"> 3D
						<input type="radio" checked="true" name="group2" id="rb4" onclick="set3D()"> 2D
					</td>
					<td>
						Legend switch type:
						<input type="radio" checked="true" name="group3" id="rb5" onclick="setSwitch()"> x
						<input type="radio" name="group3" id="rb6" onclick="setSwitch()"> v
					</td>
				</tr>
  			</table>
	</body>
</html>


